const {ccclass, property} = cc._decorator;

@ccclass
export default class Map extends cc.Component {

    @property(cc.Node) startButton: cc.Node = null;
    @property(cc.Node) replayButton: cc.Node = null;
    @property(cc.Node) replay: cc.Node = null;

    snake: Array<number> = [202, 201]; // 定义蛇的数组 
    food = 203; // 食物 
    moveOffset = 1; // 蛇头的变化值 
    nextIndex = 0; // 下一个蛇头的位置id
    g: cc.Graphics = null;
    canControl = false; // 是否可以控制

    onEnable() {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown.bind(this));
    }

    onDisable() {
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown.bind(this));
    }

    onKeyDown(e: cc.Event.EventKeyboard) {
        if (!this.canControl){
            return;
        }
        this.moveOffset = this.snake[1] - this.snake[0] == (this.nextIndex = [-1, 20, 1, -20][e.keyCode - 37] || this.moveOffset) ? this.moveOffset : this.nextIndex;
    }

    onLoad() {
        this.g = this.node.getComponent(cc.Graphics);
    }

    start() {
        this.cleanMap();
        this.move();
        this.startButton.on('click', ()=> {
            this.startGame();
        });
        this.replayButton.on('click', ()=> {
            this.restartGame();
        });
        this.startButton.active = true;
        this.replay.active = false;
        
    }

    startGame() {
        this.canControl = true;
        this.startButton.active = false;
    }

    restartGame() {
        this.snake = [202, 201];
        this.food = 203;
        this.moveOffset = 1;
        this.nextIndex = 0;
        this.cleanMap();
        this.move();
        this.canControl = true;
        this.replay.active = false;
    }

    cleanMap() {
        this.g.fillColor = cc.Color.GRAY;
        this.g.fillRect(-2, -2, 396, 396);
    }

    draw(mapIndex: number, color: cc.Color) {
        this.g.fillColor = color;
        this.g.fillRect(mapIndex % 20 * 20 - 2 , ~~(mapIndex / 20) * 20 - 2, 16, 16)
    }

    move() {
        // 增加当前蛇头的位置
        this.nextIndex = this.snake[0] + this.moveOffset
        // 加入新蛇头
        this.snake.unshift(this.nextIndex);
        // 判断新蛇头有没撞到自己
        if(this.snake.indexOf(this.nextIndex, 1) > 0) { 
            this.replay.getChildByName('result').getComponent(cc.Label).string = `score: ${this.snake.length * 100}`;
            this.replay.active = true;
            // 变红
            this.snake.forEach(v => {
                this.draw(v, cc.Color.RED);
            });
            return;
        }
        // 蛇头的越界修复
        if (this.moveOffset == -20 && this.nextIndex < 0) {
            this.snake[0] = this.snake[0] + 400;  
        } else if(this.moveOffset == 20 && this.nextIndex > 399) {
            this.snake[0] = this.snake[0] - 400;  
        } else  if (this.moveOffset == 1 && (this.nextIndex % 20 == 0 || this.nextIndex > 399)) {
            this.snake[0] = this.snake[0] - 20;  
        } else  if (this.moveOffset == -1 && (this.nextIndex % 20 == 19 || this.nextIndex < 0)) {
            this.snake[0] = this.snake[0] + 20;  
        }
        // 画出当前的蛇头
        this.draw(this.snake[0], cc.Color.GREEN);
        // 如果当前的蛇头是产生的糖果
        // 产生新的糖果
        if(this.nextIndex == this.food){
            // 当前产生的块不存在蛇
            while(this.snake.indexOf(this.food = ~~(Math.random() * 400)) >= 0);
            // 产生新的事物
            this.draw(this.food, cc.Color.YELLOW);
        }else{
            // 删除原来的点
            this.draw(this.snake.pop(), cc.Color.GRAY);
        }
        setTimeout(this.move.bind(this), 1000/10)
    };
}
